<template>
	<view class="">
		<view class="container" v-show="!isLogin">
			<view class="loading d-flex w-100 h-100 flex-column just-content-center align-items-center">
				<image src="https://res.uxiao.vip/utea-admin/loading.gif" ></image>
				<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
					<view>哎呀，还没有登录</view>
				</view>
				<button type="primary" class="drink-btn" size="default" @tap="gologin">去登录</button>
			</view>
		</view>
		<view class="container" v-show="isLogin">
			<view v-if="orders.length == 0"	class="loading d-flex w-100 h-100 flex-column just-content-center align-items-center">
				<image src="https://res.uxiao.vip/utea-admin/loading.gif" ></image>
				<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
					<view>您还没有点单</view>
					<view>快去犒劳一下自己吧~</view>
				</view>
				<button type="primary" class="drink-btn" size="default" @tap="menu">去点餐</button>
			</view>
			<view v-else="orders.length > 0" class="orders-list d-flex flex-column w-100"
				style="padding: 20rpx; padding-bottom: 0;">
				<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;"
					@tap="detail(item.out_trade_no)">
					<list-cell :hover="false">
						<view class="w-100 d-flex align-items-center">
							<view class="flex-fill d-flex flex-column">
								<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
									{{ item.shop_name }}
								</view>
								<view class="font-size-sm text-color-assist" style="font-size: 21rpx;">
									订单号：{{ item.out_trade_no }}</view>
							</view>
							<view class="" >
								<view class="font-size-lg text-color-primary" v-show="item.status=='已支付'">
									{{ item.status }}
								</view>
								<view style="color: #ff5500;"  class="font-size-lg text-color-primary" v-show="item.status=='未支付' && item.remaining>0">
									待支付
								</view>
								<view style="color: #999;" class="font-size-lg text-color-primary" v-show="item.status=='未支付' && item.remaining==0">
									已取消
								</view>
								<view style="color: #999;" class="font-size-lg text-color-primary" v-show="item.status=='已取消'">
									{{ item.status }}
								</view>
								<view style="color: #999;" class="font-size-lg text-color-primary" v-show="item.status=='已退款'">
									{{ item.status }}
								</view>
							</view>
						</view>
					</list-cell>
					<list-cell :hover="false" last>
						<view class="w-100 d-flex flex-column">
							<view class="w-100 text-truncate font-size-lg text-color-base"
								style="margin-bottom: 20rpx;">
								{{ item.product_name }}
							</view>
							<view class="d-flex justify-content-between align-items-center"
								style="margin-bottom: 30rpx;">
								<view class="font-size-sm text-color-assist">
									{{ item.create_time }}
								</view>
								<view class="d-flex font-size-sm text-color-base align-items-center">
									<view style="margin-right: 10rpx;">共{{ item.total_quantity }}件商品</view>
									<view class="font-size-lg">￥{{ (item.pay_price/100).toFixed(2) }}</view>
								</view>
							</view>
							<!-- <view class="d-flex align-items-center justify-content-end">
								<view style="margin-right: 10rpx;">
									<button type="primary" plain size="mini" v-if="item.invoice_status > 0">查看发票</button>
									<button type="primary" plain size="mini" v-else @tap.stop="goToInvoice">开发票</button>
								</view>
								<view>
									<button type="primary" plain size="mini" @tap.stop="review(item)">去评价</button>
								</view>
							</view> -->
							<view class="d-flex align-items-center justify-content-end">
								<view style="margin-right: 10rpx;">
								</view>
								<view>
									<button type="default" plain size="mini" v-show="item.status=='已退款'">已退款</button>
									<button type="primary" plain size="mini" v-show="item.status=='已支付'">已完成</button>
									<button type="default" style="background-color: #ff5500;color: #fff;"  size="mini"  v-show="item.remaining">
										<u-count-down :timestamp="item.remaining" @change="timeEnd($event,item)" :show-hours="false" font-size="24" bg-color="#ff5500" separator-color="#FFF" color="#FFF"></u-count-down>
										<text style="margin-left: 10rpx;">待支付</text></button>
									<button type="default" plain size="mini" v-show="(item.status=='未支付'&&item.remaining == 0)|| item.status=='已取消'">已取消</button>
								</view>
							</view>
						</view>
					</list-cell>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			listCell
		},
		data() {
			return {
				page: 1,
				pageSize: 5,
				orders: [],
				
			}
		},
		computed: {
			...mapGetters(['isLogin']),
			orderGoodsName() {
				return (goods) => {
					let arr = []
					goods.forEach(good => arr.push(good.name + '*' + good.number))
					return arr.join('，')
				}
			}
		},
		onLoad() {

		},
		onShow() {
			console.log(this.$store.getters.isLogin, 89898);
			// if(!this.$store.getters.isLogin) {
			// 	console.log(123);
			// 	uni.navigateTo({url: '/pages/Login/index'})
			// }
			if (this.isLogin ) {
				this.getOrders()
			}
			
			// console.log(new Date('2025-07-30 09:16:16').getTime(),123242)

		},
		// async onReachBottom() {
		// 	await this.getOrders(false)
		// },
		// async onPullDownRefresh() {
		// 	await this.getOrders(true)
		// },
		methods: {
			timeEnd(e,val){
				if(e < 1){
					val.remaining = 0
					this.cancle(val)
					this.$forceUpdate()
				}
			},
			async cancle(val){
				let res = await this.apiPost('/order/cancel',{order_no:val.out_trade_no})
				console.log(res);
				if(res.data.code == 1){
					
				}else{
					this.msg(res.data.msg)
				}
			},
			extraproperties(e) {
				console.log(e);
				// let str = ''
				// str = e.snapshot.products.cups_name
				// e.extraproperties.forEach(item => {
				// 	if (item.name != 'toppings') {
				// 		str = str + ';' + item.options.name
				// 	} else {
				// 		item.options.forEach(it => {
				// 			str = str + ';' + it.name + '*' + it.toppings_quantity
				// 		})
				// 	}
				// })
				// return str
			},
			getcountDown(){
				this.orders.forEach(item=>{
					 if(item.status == '未支付'){
						 let now = Date.now()
						 let old =  new Date(item.create_time).getTime()
						 let date = 300 - (now - old) / 1000
						 if (date > 0) {
						 	item.remaining = date
						 } else {
							 console.log(item);
						 	item.remaining = 0
							this.cancle(item)
						 }
					 }
				})
				console.log(this.orders);
			},
			getStatus(e) {
				if (e.status == '已支付') {
					return '取餐号:' + e.snapshot.products[0].pickup_no
				}
				if(e.remaining > 0 && e.status == '未支付'){
					return '待支付'
				}
				if(e.remaining <= 0 && e.status == '未支付'){
					console.log(e.out_trade_no);
					return '已取消123'
				}
			},
			menu() {
				uni.switchTab({
					url: "/pages/tarbar/menu"
				})
			},
			gologin() {
				uni.navigateTo({
					url: "/pages/Login/index"
				})
			},
			async getOrders() {
				uni.showLoading({
					title: '加载中'
				})

				let res = await this.apiPost('/order/getUserOrder')
				console.log(res);
				if (res.data.code == 1) {
					this.orders = res.data.data
					 this.getcountDown()
				} else {
					this.msg(res.data.msg)
				}
				console.log(this.orders);
				uni.hideLoading()
				// return
				// if(isRefresh) {
				// 	this.orders = []
				// 	this.page = 1
				// }
				// orders = orders.slice(this.pageSize * (this.page - 1), this.pageSize * this.page)
				// if(orders.length) {
				// 	this.orders = this.orders.concat(orders)
				// 	this.page += 1
				// }
				// uni.hideLoading()

			},
			detail(id) {
				uni.navigateTo({
					url: '/goods/order/orderDetail?order_no=' + id
				})
			},
			review(order) {
				const date = order.completed_time.split(' ')[0]
				uni.navigateTo({
					url: '/pages/review/review?storename=' + order.store.name + '&typeCate=' + order.typeCate +
						'&date=' + date
				})
			},
			goToInvoice() {
				uni.navigateTo({
					url: '/pages/invoice/invoice'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9fbfd !important;
		image {
			width: 260rpx;
			height: 260rpx;
			position: relative;
			margin-top: -200rpx;
			/* #ifdef h5 */
			margin-top: 0;
			/* #endif */
		}
	}
	/* #ifdef H5 */
	page {
		min-height: 100%;
		background-color: $bg-color;
	}
	/* #endif */
	.order-box {
		padding: 20rpx;
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
	}
	
	.drinks-img {
		width: 260rpx;
		height: 260rpx;
	}
	
	.tips {
		margin: 60rpx 0 80rpx;
		line-height: 48rpx;
	}
	
	.drink-btn {
		width: 320rpx;
		border-radius: 50rem !important;
		margin-bottom: 40rpx;
		font-size: $font-size-base;
		line-height: 3.0;
	}
	
	@mixin arch {
		content: "";
		position: absolute;
		background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}
	
	.section {
		position: relative;
		
		&::before {
			@include arch;
			left: -15rpx;
		}
		
		&::after {
			@include arch;
			right: -15rpx;
		}
	}
	
	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}
	
	.sort-num {
		font-size: 64rpx;
		font-weight: bold;
		color: $text-color-base;
		line-height: 2;
	}
	
	.steps__img-column {
		display: flex;
		margin: 30rpx 0;
		
		.steps__img-column-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	
	.steps__text-column {
		display: flex;
		margin-bottom: 40rpx;
		
		.steps__text-column-item {
			flex: 1;
			display: inline-flex;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-size-base;
			color: $text-color-assist;
			
			&.active {
				color: $text-color-base;
				font-weight: bold;
				
				.steps__column-item-line {
					background-color: $text-color-base;
				}
			}
			
			.steps__column-item-line{
				flex: 1;
				height: 2rpx;
				background-color: #919293;
				transform: scaleY(0.5);
			}
			
			.steps__text-column-item-text {
				margin: 0 8px;
			}
		}
	}
</style>